<%--
  Created by IntelliJ IDEA.
  User: 20456
  Date: 2021/11/18
  Time: 9:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<% String contextPath = request.getContextPath(); %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>登录注册界面</title>

    <link rel="stylesheet" type="text/css" href="<%=contextPath%>/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=contextPath%>/css/style.css"/>
    <script src="<%=contextPath%>/js/jquery-3.6.0.min.js"></script>
    <script src="<%=contextPath%>/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <%
        if("true".equals(request.getParameter("message"))){ %>

    <script type="text/javascript">
        alert("注册成功！请登录");
    </script>

    <%}else{%>
    <!-- 没有收到任何错误信息 -->
    <% }%>

    <script type="text/javascript">
        $(function () {
            $('#login').click(function () {
                var name_state = $('#name');
                var psd_state = $('#psd');
                var name = $('#name').val();
                var psd = $('#psd').val();
                if (name == '') {
                    name_state.parent().next().next().css("display", "block");
                    return false;
                } else if (psd == '') {
                    name_state.parent().next().next().css("display", "none");
                    psd_state.parent().next().next().css("display", "block");
                    return false;
                } else {
                    name_state.parent().next().next().css("display", "none");
                    psd_state.parent().next().next().css("display", "none");
                    $('.login').submit();
                }
            });
            $('#register').click(function () {
                var name_r_state = $('#name_r');
                var psd_r_state = $('#psd_r');
                var affirm_psd_state = $('#affirm_psd');
                var name_r = $('#name_r').val();
                var psd_r = $('#psd_r').val();
                var affirm_psd = $('#affirm_psd').val();
                if (name_r == '') {
                    name_r_state.parent().next().next().css("display", "block");
                    return false;
                } else if (psd_r == '') {
                    psd_r_state.parent().next().next().css("display", "block");
                    return false;
                } else if (affirm_psd == '') {
                    affirm_psd_state.parent().next().next().css("display", "block");
                    return false;
                } else if (psd_r != affirm_psd) {
                    return false;
                } else {
                    $('.register').submit();
                }
            })
        })

        function ok_or_errorBylogin(l) {
            var content = $(l).val();
            if (content != "") {
                $(l).parent().next().next().css("display", "none");
            }
        }

        function ok_or_errorByRegister(r) {
            var affirm_psd = $("#affirm_psd");
            var psd_r = $("#psd_r");
            var affirm_psd_v = $("#affirm_psd").val();
            var psd_r_v = $("#psd_r").val();
            var content = $(r).val();
            if (content == "") {
                $(r).parent().next().next().css("display", "block");
                return false;
            } else {
                $(r).parent().next().css("display", "block");
                $(r).parent().next().next().css("display", "none");
                if (psd_r_v == "") {
                    $(psd_r).parent().next().css("display", "none");
                    $(psd_r).parent().next().next().css("display", "none");
                    $(psd_r).parent().next().next().css("display", "block");
                    return false;
                }
                if (affirm_psd_v == "") {
                    $(affirm_psd_v).parent().next().css("display", "none");
                    $(affirm_psd_v).parent().next().next().css("display", "none");
                    $(affirm_psd_v).parent().next().next().css("display", "block");
                    return false;
                }
                if (psd_r_v == affirm_psd_v) {
                    $(affirm_psd).parent().next().css("display", "none");
                    $(affirm_psd).parent().next().next().css("display", "none");
                    $(psd_r).parent().next().css("display", "none");
                    $(psd_r).parent().next().next().css("display", "none");
                    $(affirm_psd).parent().next().css("display", "block");
                    $(psd_r).parent().next().css("display", "block");
                } else {
                    $(affirm_psd).parent().next().css("display", "none");
                    $(affirm_psd).parent().next().next().css("display", "none");
                    $(psd_r).parent().next().css("display", "none");
                    $(psd_r).parent().next().next().css("display", "none");
                    $(psd_r).parent().next().css("display", "block");
                    $(affirm_psd).parent().next().next().css("display", "block");
                    return false;
                }
            }
        }
        // 按钮转换
        function barter_btn(bb) {
            $(bb).parent().parent().fadeOut(1000);
            $(bb).parent().parent().siblings().fadeIn(2000);
        }
    </script>
</head>
<body class="login_body">

<div class="login_div">
    <div class="col-xs-12 login_title">登录</div>
    <form action="/user/login" class="login" method="post" target="_self">
        <div class="nav">
            <div class="nav login_nav">
                <div class="col-xs-4 login_username">
                    用户名:
                </div>
                <div class="col-xs-6 login_usernameInput">
                    <input type="text" name="username" id="name" value="" placeholder="&nbsp;&nbsp;用户名"
                           onblur="javascript:ok_or_errorBylogin(this)"/>
                </div>
                <div class="col-xs-1 ok_gou">
                    √
                </div>
                <div class="col-xs-1 error_cuo">
                    ×
                </div>
            </div>
            <div class="nav login_psdNav">
                <div class="col-xs-4">
                    密&nbsp;&nbsp;&nbsp;码:
                </div>
                <div class="col-xs-6">
                    <input type="password" name="password" id="psd" value="" placeholder="&nbsp;&nbsp;密码"
                           onBlur="javascript:ok_or_errorBylogin(this)"/>
                </div>
                <div class="col-xs-1 ok_gou">
                    √
                </div>
                <div class="col-xs-1 error_cuo">
                    ×
                </div>
            </div>
            <c:if test="${not empty error}">
                <p style="color: red;padding-left: 200px">${error}</p>
            </c:if>
            <div class="col-xs-12 login_btn_div">
                <input type="button" class="sub_btn" value="登录" id="login"/>
            </div>
        </div>
    </form>

    <div class="col-xs-12 barter_btnDiv">
        <button class="barter_btn" onClick="javascript:barter_btn(this)">没有账号?前往注册</button>
    </div>
</div>

<div class="register_body">
    <div class="col-xs-12 register_title">注册</div>
    <form action="/user/register" class="register" method="post" target="_self">
        <div class="nav">
            <div class="nav register_nav">
                <div class="col-xs-4">
                    用户名:
                </div>
                <div class="col-xs-6">
                    <input type="text" name="username" id="name_r" value="" placeholder="&nbsp;&nbsp;用户名"
                           onBlur="javascript:ok_or_errorByRegister(this)"/>
                </div>
                <div class="col-xs-1 ok_gou">
                    √
                </div>
                <div class="col-xs-1 error_cuo">
                    ×
                </div>
            </div>
            <div class="nav register_psdnav">
                <div class="col-xs-4">
                    密&nbsp;&nbsp;&nbsp;码:
                </div>
                <div class="col-xs-6">
                    <input type="password" name="password" id="psd_r" value="" placeholder="&nbsp;&nbsp;密码"
                           onBlur="javascript:ok_or_errorByRegister(this)"/>
                </div>
                <div class="col-xs-1 ok_gou">
                    √
                </div>
                <div class="col-xs-1 error_cuo">
                    ×
                </div>
            </div>
            <div class="nav register_affirm">
                <div class="col-xs-4">
                    确认密码:
                </div>
                <div class="col-xs-6">
                    <input type="password" name="repassword" id="affirm_psd" value="" placeholder="&nbsp;&nbsp;确认密码"
                           onBlur="javascript:ok_or_errorByRegister(this)"/>
                </div>
                <div class="col-xs-1 ok_gou">
                    √
                </div>
                <div class="col-xs-1 error_cuo">
                    ×
                </div>
            </div>
            <div class="col-xs-12 register_btn_div">
                <input type="button" class="sub_btn" value="注册" id="register"/>
            </div>
        </div>
    </form>
    <div class="col-xs-12 barter_register">
        <button class="barter_registerBtn" onClick="javascript:barter_btn(this)" style="">已有秘籍?返回登录</button>
    </div>
</div>

</body>
</html>
